<template>
	<view>
		<view v-if="authorized">
			<!-- 用户信息 -->
			<view class="head-container">
				<image :src="avatar" mode="aspectFill" class="img-avatar"></image>
				<view class="info-container">
					<view class="nick-container">
						<text class="txt-nick">{{nick + "-" + "[" + utype [type] + "]"}}</text>
						<image :src="badges[type]" mode="widthFix" class="img-badge"></image>
					</view>
					<text class="txt-user">{{user + ":" +email}}</text>
				</view>
			</view>
			<!-- 注销 -->
			<text class="iconfont icon-tuichu ic-zhuxiao" @click="clickLogout"></text>
			<!-- 用户发布的文章 -->
			<view class="data-container">
				<view class="data-title" @click="clickSwitch(0)">
					<text class="data-title-name">我发布的{{myCount}}篇文章</text>
					<text
						:class="status[0].visible ? 'iconfont icon-caret-up  ic-arrow':'iconfont icon-caret-down ic-arrow'"></text>
				</view>
				<scroll-view v-if="status[0].visible" scroll-x class="scroll" scroll-with-animation="true"
					@scrolltolower="getMyBlogs">
					<view v-for="(blog,index) in myBlogs" :key="'m_'+blog.id" @click="gotoDetail(blog.id)"
						class="scroll-item">
						<image :src="blog.picture" mode="aspectFill"></image>
						<text>{{blog.title}}</text>
					</view>
				</scroll-view>

			</view>
			<!-- 管理的类别 -->
			<view class="data-container">
				<view class="data-title" @click="clickSwitch(1)">
					<text class="data-title-name">我管理的{{categories.length}}条类别数据</text>
					<text
						:class="status[1].visible ? 'iconfont icon-caret-up  ic-arrow':'iconfont icon-caret-down ic-arrow'"></text>
				</view>
				<view v-if="status[1].visible" class="data-list">
					<text class="data-item" v-for="(c,index) in categories" :key="c.id">
						<text class="data-item-name" @click="clickUpdateCategory(c.id,c.name)">{{c.name}}</text>
						<text :class="c.count==0?'data-item-btn':'data-item-count'"
							@click="c.count==0?clickDelete(c.id,c.name):''">{{c.count==0?'X':c.count}}</text>
					</text>
					<view class="data-item">
						<text class=" iconfont icon-tianjia ic-add" @click="clickAdd"></text>
					</view>
				</view>
			</view>



			<!-- 点赞的博客 -->
			<view class="data-container">
				<view class="data-title" @click="clickSwitch(2)">
					<text class="data-title-name">点赞过的{{myGoodBlogs.length}}篇文章</text>
					<text
						:class="status[2].visible ? 'iconfont icon-caret-up  ic-arrow':'iconfont icon-caret-down ic-arrow'"></text>
				</view>
				<scroll-view v-if="status[2].visible" scroll-x class="scroll" scroll-with-animation="true"
					@scrolltolower="getMyBlogs">
					<view v-for="(blogs,index) in myGoodBlogs" :key="'L_'+blogs.id" @click="gotoDetail(blogs.id)"
						class="scroll-item">
						<image :src="host +blogs.picture" mode="aspectFill"></image>
						<text>{{blogs.title}}</text>
					</view>
				</scroll-view>
			</view>

			<view class="data-container">
				<view class="data-title" @click="clickSwitch(3)">
					<text class="data-title-name">我管理{{myTag.length}}个标签数据</text>
					<text
						:class="status[3].visible ? 'iconfont icon-caret-up  ic-arrow':'iconfont icon-caret-down ic-arrow'"></text>
				</view>


				<view v-if="status[3].visible" class="scrollNew">
					<view class="data-item" v-for="(tag,index) in  myTag">
						<text @click="clickUpdataCategory(tag.id,tag.title)" class="data-item-name">{{tag.title}}</text>

						<text @click="tag.count==0?clickDelete(tag.id,tag.title):''"
							:class="tag.count === 0 ? 'data-item-btn' : 'data-item-count'">{{ tag.count === 0 ? 'x' : tag.count }}</text>
					</view>

					<view class="data-item">
						<text class="iconfont icon-tianjia ic-add" @click="clickAdd"></text>
					</view>
				</view>
			</view>

		</view>

		<dialog-shell ref="add_shell" title="添加类别" @confirm="confirmAdd">
			<view style="margin:10rpx;">
				<input type="text" placeholder="请输入新的名称" focus style="padding-left: 15rpx;" @input="inputGetValue" />
			</view>
		</dialog-shell>

		<dialog-shell ref="update_shell" title="修改类别名称" @confirm="confirmUpdate">
			<view style="margin:10rpx;">
				<input type="text" placeholder="请输入新的名称" :value="oldName" focus style="padding-left: 15rpx;"
					@input="inputGetValue" />
			</view>
		</dialog-shell>
		<!-- 登录组件 -->
		<login-dialog ref="login" @after="afterLogin"></login-dialog>
	</view>
</template>

<script>
	let app = getApp()
	let page = 0
	let LikeBlog = [] //点赞请求数据
	let newName = ''
	let updateId = ''
	// 获取缓存中的点赞数据
	// let good_ids = uni.getStorageSync(this.$params.key_good_ids)
	export default {
		data() {
			return {
				authorized: app.globalData.token.length > 0,
				avatar: this.$params.host + app.globalData.avatar,
				nick: app.globalData.nickName,
				type: app.globalData.type,
				utype: ["管理员", "认证博主", "普通用户"],
				badges: ["../../static/icons/badge0.png", "../../static/icons/badge.png", "../../static/icons/badge2.png"],
				user: app.globalData.userName,
				email: app.globalData.email,
				status: [{
						visible: false
					},
					{
						visible: false
					},
					{
						visible: false
					},
					{
						visible: false
					},
				],
				myBlogs: [], //我发布的博客
				myCount: -1, //发布博客数量
				categories: [],
				oldName: '',
				host: this.$params.host,
				myGoodBlogs: [], //点赞博客列表，
				myGoodCount: -1, //点赞博客数量
				myTag: [],
				categories: [],
			}
		},
		onLoad() {
			this.$noti.add(this.$params.noti_login_status, this.afterLogin, this)


		},
		onShow() {
			if (!this.authorized) {
				return
			}
			this.loadData()

		},
		onUnload() {
			this.$noti.remove(this.$params.noti_login_status, this)
		},
		mounted() {
			// 登录判断.如果没登录则弹出登录框
			this.authorized = app.globalData.token.length > 0
			if (!this.authorized) {
				this.$refs.login.show()
			}

		},
		methods: {
			//获取用户数据
			loadData() {
				this.myBlogs = []
				this.myCount = -1
				this.myTag = []
				page = 0
				this.getMyBlogs() //请求发布文章
				this.getGoodBlogs() //获取点赞文章
				this.getCategories()
				this.getMyTags() //标签数据管理
				// console.log(this.myGoodBlogs)
			},
			//标签数据管理
			getMyTags() {
				this.$request.get(this.$params.host + this.$params.action_tags, res => {
					let url = this.$params.host + this.$params.action_tags_count
					res.data.forEach(async (r) => {
						// let categories = []
						let c = await this.$request.requestAsync(url + r.id)
						if (c.data.success) {
							let tag = {
								id: r.id,
								title: r.name,
								count: c.data.data
							}
							this.myTag.push(tag);
							console.log(this.tag)
						}
					})

				}, () => {})
			},
			//获取点赞文章
			getGoodBlogs() {
				this.myGoodBlogs = []
				//获取缓存中点赞的博客id
				let good_ids = uni.getStorageSync(this.$params.key_good_ids)
				for (let i in good_ids) {
					let url = this.$params.host + this.$params.action_hot + good_ids[i]

					this.$request.get(url, res => {
						this.myGoodBlogs = this.myGoodBlogs.concat(res.data)
					}, () => {})

				}


			},
			//请求发布文章
			getMyBlogs() {
				if (this.myCount >= 0 && this.myBlogs.length == this.myCount) {
					return
				}
				let header = {
					"content_type": "application/json;charset=UTF-8",
					"page": page++,
					"size": 2
				}

				let url = this.$params.host + this.$params.action_my_blogs + app.globalData.uid
				this.$request.getWithHeader(url, header, res => {
					// console.log(res.data)
					res.data.forEach(blog => {
						if (!blog.picture.startsWith('http')) {
							blog.picture = this.$params.host + blog.picture
						}
					})
					// 异步同步处理(举例)
					// res.data.forEach( async (blog)  => {
					// 	if (!blog.picture.startsWith('http')) {
					// 		blog.picture = this.$params.host + blog.picture
					// 	}
					// 	let res=await this.$request.requestAsync("")
					// 	if(res.success){
					// 		name =res.data.name
					// 	}
					// })

					this.myBlogs = this.myBlogs.concat(res.data)
					this.myCount = parseInt(res.message)
					this.status.visible = this.myCount > 0

				}, () => {})
			},
			// 登录传值
			afterLogin() {
				if (this.authorized) {
					return
				}
				this.authorized = app.globalData.token.length > 0
				this.nick = app.globalData.nickName
				this.type = app.globalData.type
				this.user = app.globalData.userName
				this.email = app.globalData.email
				this.avatar = this.$params.host + app.globalData.avatar
				this.loadData() //登录后执行方法获取数据
			},
			// 注销登录
			clickLogout() {
				let url = this.$params.host + this.$params.action_Logout
				let data = {
					token: app.globalData.token
				}
				this.$request.postParam(url, data, res => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					if (res.success) {
						this.authorized = false
						app.globalData.uid = ""
						app.globalData.token = ""
						app.globalData.avatar = "/static/icons/default_user.png"
						app.globalData.type = "-1"
						app.globalData.nickName = ""
						app.globalData.userName = ""
						app.globalData.email = ""
						this.myCount = -1
						this.myBlogs = []
						this.$refs.login.show()
					}
				}, () => {})
			},
			//获取管理类别数据
			getCategories() {
				//todo,首先检查用户身份，只有管理员才可以请求类别数据
				this.categories = []
				let url = this.$params.host + this.$params.action_categories
				this.$request.get(url, res => {
					console.log(res);
					url = this.$params.host + this.$params.action_category_count
					res.data.forEach(async (c) => {
						let r = await this.$request.requestAsync(url + c.id)
						if (r.data.success) {
							let category = {
								id: c.id,
								name: c.name,
								count: r.data.data
							}
							this.categories.push(category)
						}
					})
				}, () => {})
			},

			clickSwitch(index) {
				let now = this.status[index].visible
				this.status[index].visible = !now
			},
			confirmAdd() {
				//1.检查数据合法性
				if (newName.trim().length == 0) {
					uni.showToast({
						title: '请输入类别名称',
						icon: 'none'
					})
					return
				}
				//2.标签，先确认类别或标签
				//3.发送请求
				let url = this.$params.host + this.$params.action_category_add
				let data = {
					"token": app.globalData.token,
					"name": newName
				}
				this.$request.requestAsync(url, data, 'POST')
					.then(res => {
						if (!res.data.success) {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							});
						} else {
							let category = {
								id: res.data.data.id,
								name: res.data.data.name,
								count: 0
							}
							this.categories.push(category)
						}
						newName = ""
					})
					.catch(err => {
						newName = ""
						console.log(err)
					})



			},
			inputGetValue(e) {
				newName = e.detail.value
			},
			clickAdd() {
				this.$refs.add_shell.show()
			},
			clickUpdateCategory(id, name) {
				newName = name
				updateId = id
				this.oldName = name
				this.$refs.update_shell.show()
			},
			confirmUpdate() {
				if (newName.trim().length == 0) {
					uni.showToast({
						title: '请输入类别名称',
						icon: 'none'
					});
					return
				}
				let url = this.$params.host + this.$params.action_category_put + updateId
				let data = {
					"token": app.globalData.token,
					"name": newName
				}
				this.$request.requestAsync(url, data, 'PUT')
					.then(res => {
						if (!res.data.success) {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							});
						} else {
							this.categories.forEach(c => {
								if (c.id == res.data.data.id) {
									c.name = res.data.data.name
								}
							})
						}
					})
					.catch(res => {
						console.log(err)
					})
			},
			// 删除标签
			clickDelete(id, name) {
				let url = this.$params.host + this.$params.action_category_del + id

				let data = {
					"token": app.globalData.token
				}
				uni.showModal({
					title: '确认',
					content: '确认要删除' + name + '吗？',
					showCancel: true,
					cancelText: '再想想',
					confirmText: '删除',
					success: res => {
						if (res.confirm) {
							this.$request.deleteParams(url, data, res => {
								if (res.success) {
									this.categories = this.categories.filter(c => c.id != id)
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none'
									});
								}
							}, () => {})
						}
					}
				})



			},
			//详情页跳转
			gotoDetail(id) {
				uni.navigateTo({
					url: '../blog/blog?id=' + id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

		}
	}
</script>

<style>
	@import url("profile.css");
</style>
